<template>
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    :page-sizes="pageSizes" :page-size="size" :layout="layout" :total="total" background>
  </el-pagination>
</template>
<script>
export default {
  props: {
    layout: {
      type: String,
      default: () => {
        return "total, sizes, prev, pager, next, jumper"
      }
    },
    page: {
      type: Number,
      default: () => {
        return 1
      }
    },
    total: {
      type: Number,
      default: () => {
        return 100
      }
    },
    size: {
      type: Number,
      default: () => {
        return 10
      }
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 30, 40, 50, 100, 200, 500, 1000]
      }
    }
  },
  data() { 
    return {}
  },
  mounted() {
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val);
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val);
    }
  }
}
</script>
<style lang="scss" scoped></style>